
<template>
  <div>
    <div v-for="(arr, key) in ContestLogs" :key="key" class="contest">
      <h4 class="title" v-text="arr[0].contest_title"></h4>
      <div class="block">
        <div
          v-for="(item, index) in arr"
          :key="index"
          :class="{item:true, ...(statusFormat(item.status))}"
        >
          <H4 v-text="item.num"></H4>
        </div>
      </div>
    </div>
    <p v-if="ContestLogs.length===0">暂无比赛记录</p>
    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>

<script>
import { Get } from "../api";
export default {
  name: "ContestLogPart",
  data() {
    return {
      ContestLogs: [],
      spinShow: true
    };
  },
  props: {
    contest_id: {
      type: Number,
      default: 0
    },
    userId: {
      type: Number,
      default:0
    }
  },
  methods: {
    statusFormat(value) {
      const enumStatus = { 0: "error", 1: "success", 2: "null" };
      if (!enumStatus[value]) {
        return { null: true };
      }
      let ret = {};
      ret[enumStatus[value]] = true;
      return ret;
    }
  },
  async created() {
    let value = await Get.getProblemStatus({
      action: "contest",
      contest_id: this.contest_id,
      user_id:this.userId
    }).then(res => res.data);
    let tempTowArr = {};
    for (let i = 0; i < value.length; i++) {
      const item = value[i];
      if (!tempTowArr[item.contest_id]) {
        tempTowArr[item.contest_id] = [];
      }
      tempTowArr[item.contest_id].push(item);
    }
    this.ContestLogs = tempTowArr;
    this.spinShow = false;
  }
};
</script>

<style lang="less" scoped>
.contest {
  margin-bottom: 15px;
  .title {
    padding: 3px 0;
    .right {
      float: right;
    }
  }
  .block {
    border-top: 1px solid #ddd;
    overflow: hidden;
    white-space: nowrap;
    height: 50px;
    transition: 0.36s all;
    .item {
      display: inline-block;
      height: 40px;
      width: 40px;
      margin-right: 5px;
      margin-top: 3px;
      border-radius: 3px;
      text-align: center;
      line-height: 40px;
    }
    .success {
      background: rgb(144, 255, 141);
    }
    .error {
      background: rgb(255, 141, 141);
    }

    .null {
      background: rgb(189, 189, 189);
    }
    &:hover {
      overflow-x: auto;
      text-overflow: clip;
    }
    &::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }
    &::-webkit-scrollbar-thumb {
      background: #587785;
    }
    &::-webkit-scrollbar-track {
      background: #ffffff;
    }
  }
}
</style>